<template>
  <div class="wrapper" style="height: 650px;">
    <ul class="nav nav-tabs ur-nav-tabs d-flex justify-content-center">
      <li class="nav-item w65" @click="navFun(item.id)" v-for="(item,index) in navs" >
        <a class="nav-link" :class="{active:item.id==curNavIndex}" style="padding:inherit">
          <div>
            <i class="d-block iconfont font20" :class="'icon-'+item.icon"></i>{{item.name}}
          </div>
        </a></li>
    </ul>
    <div style="width: 100%;height: 10px;background: #060C3B;"></div>
    <div class="tab-pane">
      <!--状态-->
      <tab-state v-if="curNavIndex==1" :box="box"></tab-state>
      <!--采集-->
      <tab-meter v-else-if="curNavIndex==2" :box="box"></tab-meter>
      <!--线控-->
      <tab-line-ctrl v-else-if="curNavIndex==3" :box="box"></tab-line-ctrl>
      <!--控制-->
      <tab-ctrl v-else-if="curNavIndex==4" :box="box"></tab-ctrl>
      <!--任务-->
      <div v-else>
        <el-table class="mx-auto my-4" :data="taskList"  style="width: 380px;" :min-height="300" >
          <el-table-column  prop="Id" label="任务编号" align="center" width="70" ></el-table-column>
          <el-table-column  prop="Name" label="任务名称" align="center" width="150" ></el-table-column>
          <el-table-column  prop="ExcuteTime" label="执行时间" align="center" width="160"></el-table-column>
          <el-table-column  prop="OpObject" label="操作对象" align="center" width="100">
            <template slot-scope="scope">
              {{global.OpObject[scope.row.OpObject]}}
            </template>
          </el-table-column>
          <el-table-column  prop="Params" label="参数值" align="center" width="300"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import tabState from './tab-state'
  import tabMeter from './tab-meter'
  import tabLineCtrl from './tab-lineCtrl'
  import tabCtrl from './tab-ctrl'
  export default {
    components: {tabState,tabMeter,tabLineCtrl,tabCtrl},
    props: {
      box:{
        type:Object,
        default:{}
      }
    },
    data() {
      return {
        curNavIndex:1,
        lightLevel:0,
        navs:[
          {id:1,name:'状态',icon:'status'},
          {id:2,name:'采集',icon:'caiji'},
          {id:3,name:'线控',icon:'xiankong'},
          {id:4,name:'控制',icon:'info'},
          {id:5,name:'任务',icon:'kongzhi'},
        ],
        taskList:[]
      }
    },
    watch: {
      box:{
        handler(newValue, oldValue) {
          this.box = newValue
          this.queryTask()
        },
        deep: true
      }
    },
    computed: {},
    methods: {
      navFun(index){
        this.curNavIndex=index
      },
      queryTask(){
        api.fetchSimple('/ViewInfo/QueryEccTask',{EccAddr:this.box.Addr})
            .then(r=>{
              this.taskList=r
            })
      }
    },
    created() {
      this.queryTask()
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  .titleGroup{
    label{
      display:block;line-height :24px;padding-left :29px;color:#D8D8D8
      &.txt{color:#6B82CB;font-size:12px;}
    }
  }
  .signalWrap{ width:100%;height:34px;line-height:34px;background :url('~static/image/map/signal_bg.png') no-repeat}
  .energy_badge{color:#F0F0F0;height:36px;line-height:36px;
    i{font-size :28px;color:#FFBC00;text-shadow:0 0 6px rgba(235, 180, 13, 0.5);}
    h2{font-size:30px;font-weight :bold;}
  }
  .poleCount{
    display:flex;justify-content:space-around;
    .state0{color:#D4D4D4;text-shadow:0 0 4px rgba(204, 204, 204,.4);}
    .state1{color:#FF7700;text-shadow:0 0 4px #EC7003;}
    .state2{color:#E72424;text-shadow:0 0 4px #EE0603;}
  }
</style>
